<template>
  <div>
    <div @click="tomv"><Title title="推荐MV"></Title></div>
    <div class="mvcontent">
      <div
        class="mvsong"
        v-for="item in mvSongList"
        :key="item.artistId"
        :data-id="item.artistId"
        @click="mvSong"
      >
        <div>
          <img class="mvimg" v-lazy="item.picUrl" />
          <div class="mvbofang">
            <Bofang :playCount="item.playCount"></Bofang>
          </div>
          <div class="mvcopywriter">{{ item.copywriter }}</div>
          <h5 class="mvName">{{ item.name }}</h5>
          <div class="mvsinger">{{ item.artistName }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Title from '../Title/title.vue'
import Bofang from '../bofang/bofang.vue'
export default {
  name: 'MV',
  data() {
    return {
      mvSongList: [],
    }
  },
  components: {
    Title,
    Bofang,
  },
  methods: {
    async remv() {
      const res = await this.$API.RecommentSong.reqmv()
      this.mvSongList = res.result
      // console.log(res.result)
    },
    // 点击标题实现跳转
    tomv() {
      this.$router.history.push({ path: '/newmv' })
    },
    // 点击跳转
    mvSong(event) {
      // 拿到歌曲id
      const { id } = event.currentTarget.dataset
      //console.log(id)
      // 跳转页面，并将数据传过去
      this.$router.history.push({
        name: 'NewMv',
        query: {
          id,
        },
      })
    },
  },
  async mounted() {
    this.remv()
  },
}
</script>

<style scoped>
.mvcontent {
  margin-left: 20px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.mvbofang {
  opacity: 0.9;
  position: relative;
  top: -130px;
  margin-right: 10px;
  /* margin-left: 40px; */
  text-align: right;
}
.mvsong {
  flex-grow: 0;
  width: 23%;
  min-width: 23%;
  /* width: 280px; */
}
/* 鼠标悬停效果 */
.mvsong:hover .mvbofang {
  opacity: 0;
  transition-duration: 0.5s;
}
.mvsong:hover .mvcopywriter {
  opacity: 0.9;

  transition-duration: 1.2s;
}

.mvimg {
  width: 100%;
  height: 130px;
  z-index: -1;
  border-radius: 5px;
}
.mvcopywriter {
  /* display: none; */
  opacity: 0;
  position: relative;
  top: -147px;
  width: 100%;
  height: 30px;
  line-height: 30px;
  background-color: rgba(87, 87, 87, 0.5);
  color: white;
  text-indent: 10px;
  border-radius: 5px;
}
.mvsinger {
  color: rgb(128, 128, 128);
  font-size: 14px;
  line-height: 20px;
}
.mvName {
  width: 100%;
  position: relative;
  margin-top: -25px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>